
<div style="POSITION: relative" id="content">
  <h3>easyUI 创建一个基础的TreeGrid</h3>
  <div id="article_content" class="article_content">
	<p>TreeGrid组件从DataGrid继承但是允许一个parent/child 节点关系在行之间,许多属性继承至DataGrid 可以用在TreeGrid,使用TreeGrid,用户必须定义treeField属性这个指明那么字段作为tree节点。
</p>
<p>这个教程向你展示,如何使用TreeGrid
 设置一个文件夹浏览</p>
<p><img src="documentation/images/1344850149_7132.png" alt=""></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
  创建 &nbsp;TreeGrid</h4>
<pre name="code" class="html">&lt;table id=&quot;test&quot; title=&quot;Folder Browser&quot; class=&quot;easyui-treegrid&quot; style=&quot;width:400px;height:300px&quot;  
        url=&quot;data/treegrid_data.json&quot;  
        rownumbers=&quot;true&quot;  
        idField=&quot;id&quot; treeField=&quot;name&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;name&quot; width=&quot;160&quot;&gt;Name&lt;/th&gt;  
            &lt;th field=&quot;size&quot; width=&quot;60&quot; align=&quot;right&quot;&gt;Size&lt;/th&gt;  
            &lt;th field=&quot;date&quot; width=&quot;100&quot;&gt;Modified Date&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
下载 EasyUI 示例代码:</h4>
<div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px">
<a href="http://www.jeasyui.com/tutorial/tree/download/easyui-treegrid1-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-treegrid-demo.zip</a></div>
<br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>